
<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-08-15 14:23:50
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2022-10-26 15:34:22
 * @FilePath: \qualitymeasurement\src\components\HelloWorld.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="index">
    <div class="top">
      <div style="width:62.34%">
        <div class="left" id="myMaps" ref="map">
          <div class="search">
            <div class="left">
              <div class="companySele">
                <select @change="projectList1($event)" ref="pj" name id="project" v-model="projectId">
                  <option value class="optionBc">选择工程项目</option>
                  <option class="optionBc" v-for="(item, index) in projectsData" :value="item.ProjectId" :key="index">
                    {{
                      item.ProjectName
                    }}
                  </option>
                </select>
              </div>
              <div class="companySele">
                <select ref="pj" name id="project" v-model="tendersId" @change="projectList2($event)">
                  <option value>选择施工标段</option>
                  <option v-for="(item, index) in tendersData" :value="item.ContractId" :key="index">
                    {{ item.ContractName }}</option>
                </select>
              </div>
            </div>
            <div class="right">
              <div class="timeSele">
                <select name="SY" id="SY" class="year" v-model="allyaer" @change="projectList3($event)">
                  <option value>年</option>
                  <option v-for="(item, index) in allyaerinfo" :key="index" :value="item.yearStr || '年'">{{
                    item.yearStr
                  }}
                  </option>
                </select>
              </div>
              <div class="timeSele">
                <select name="SY" placeholder="季度" id="SY" class="year" v-model="allquarter"
                  @change="projectList4($event)">
                  <option value="">季度</option>
                  <option v-for="(item, index) in quarterData" :key="index" :value="item.quarterStr">{{
                    item.quarterStr
                  }}
                  </option>
                </select>
              </div>
              <div class="timeSele">
                <select name="SY" id="SY" class="year" v-model="allmonth" @change="projectList5($event)">
                  <option value>月</option>
                  <option v-for="(item, index) in monthsData" :key="index" :value="item.monthStr">{{ item.monthStr }}
                  </option>
                </select>
              </div>
            </div>

          </div>
          <div class="changeBtn">
            <div class="mapSelect" v-for="(data, index) in typeData" :key="data.value"
              @click="changeType($event, index)">
              <img class="imgSrc" :src="data.show === true ? typeImgA : typeImgN" alt />
              <div class="imgText" :style="{ 'color': data.show === true ? '#fff' : 'rgba(0, 117, 255, 1)' }">{{
                data.text
              }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="width:37.2357%">
        <div class="right">
          <div class="project">
            <div class="commonHead">各工程项目砼生产统计
              <div class="tab">
                <div class="changeBtn">
                  <div class="mapSelect" v-for="(data, index) in projectData" :key="data.value"
                    @click="changeProjectTbs($event, index)"
                    :style="{ 'background': data.show === true ? 'rgba(0, 117, 255, 1)' : '#011967' }">
                    <div class="imgText" :style="{ 'color': data.show === true ? '#fff' : 'rgba(0, 117, 255, 1)' }">{{
                      data.text
                    }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="projectContent">
              <Project :commonData="BhzConcreteData" :commonText="getBhzConcreteIndex"></Project>
            </div>
          </div>
          <div class="banhuozhan">
            <div class="commonHead">拌和站生产质量分析
              <div class="tab">
                <div class="changeBtn">

                  <div class="mapSelect" v-for="(data, index) in quantityData" :key="data.value"
                    @click="changeQuantityTbs($event, index)"
                    :style="{ 'background': data.show === true ? 'rgba(0, 117, 255, 1)' : '#011967' }">

                    <div class="imgText" :style="{ 'color': data.show === true ? '#fff' : 'rgba(0, 117, 255, 1)' }">{{
                      data.text
                    }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="result">
              <div class="top">
                <div class="left">
                  <div class="dischargeLeft">
                    <div class="box"></div>
                  </div>
                  <QuantityEcharts :commonData="BhzQualityData.SczlSumData" :commonText="getBhzQualityText">
                  </QuantityEcharts>
                  <div class="dischargeRight">

                  </div>
                </div>
                <div class="right">
                  <Rate :commonData="BhzQualityData.SczlSumData"></Rate>
                </div>

              </div>
              <div class="bottom">
                <ProjectTable :commonData="BhzQualityData.producQAData" :commonText="getBhzQualityText"></ProjectTable>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-row :gutter="8" class="bottom">
      <el-col :span="16">
        <div class="left">
          <div class="commonHead">拌和站生产产能统计<div class="tab">
              <div class="changeBtn">

                <div class="mapSelect" v-for="(data, index) in produceLeftData" :key="data.value"
                  @click="changeproduceLeftTbs($event, index)"
                  :style="{ 'background': data.show === true ? 'rgba(0, 117, 255, 1)' : '#011967' }">

                  <div class="imgText" :style="{ 'color': data.show === true ? '#fff' : 'rgba(0, 117, 255, 1)' }">{{
                    data.text
                  }}</div>
                </div>

              </div>
            </div>
          </div>

          <div class="echarts">
            <ProduceLeft :commonData="BhzProCatyData" :commonText="getBhzProCatyIndex"></ProduceLeft>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="right">
          <div class="commonHead">拌和站生产产能统计
            <div class="tab">
              <div class="changeBtn">

                <div class="mapSelect" v-for="(data, index) in produceRightData" :key="data.value"
                  @click="changeproduceRightTbs($event, index)"
                  :style="{ 'background': data.show === true ? 'rgba(0, 117, 255, 1)' : '#011967' }">

                  <div class="imgText" :style="{ 'color': data.show === true ? '#fff' : 'rgba(0, 117, 255, 1)' }">{{
                    data.text
                  }}</div>
                </div>

              </div>
            </div>
          </div>

          <div class="echarts">
            <ProduceRight :commonData="BhzProeFcyData" :commonText="BhzProeFcyText"></ProduceRight>
          </div>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import {
  getToken,
  getProjectList,//获取项目列表
  gettendersList,//标段信息
  getBhzProCatyList,// 拌和站生产产能统计左侧
  getBhzProeFcyList,//拌和站生产产能统计右侧
  getBhzConcreteList,//各工程项目砼生产统计
  getBhzQualityList,//拌和站生产质量分析
  getBhList
} from "@/api/request.js";

// 拌和站生产产能纺计左
import ProduceLeft from "@/components/produceLeft";
// 拌和站生产产能纺计右
import ProduceRight from "@/components/produceRight";
import Project from "@/components/project";
import ProjectTable from "@/components/projectTable";
import QuantityEcharts from "@/components/quantityEcharts";
import Rate from "@/components/rate";





// import { exit } from '../api/request.js'
export default {
  name: 'Index',
  data() {
    return {
      yearText: null,//年
      monthText: null,
      tendersText: 0,
      indexNum: 2,
      token: null,
      mapShow: null,
      BhzProCatyData: [],//拌和站生产产能统计
      getBhzQualityText: "方",
      BhzProeFcyData: {},//拌和站生产产能统计
      BhzProeFcyText: "出料方数",
      BhzConcreteData: [],//各工程项目砼生产统计
      BhzQualityData: {},//拌和站生产质量分析
      // 选择框
      projectsData: [],//公司
      tendersData: [],//标段
      allyaerinfo: [],//年
      quarterData: [
        {
          quarterStr: "季度",
          index: 0
        },
        {
          quarterStr: "第一季度",
          index: 1
        }, {
          quarterStr: "第二季度",
          index: 2
        }, {
          quarterStr: "第三季度",
          index: 3
        }, {
          quarterStr: "第四季度",
          index: 4
        },
      ],//季度
      monthsData: [],
      monthData: [
        {
          monthStr: "1月"
        },
        {
          monthStr: "2月"
        },
        {
          monthStr: "3月"
        },
        {
          monthStr: "4月"
        },
        {
          monthStr: "5月"
        },
        {
          monthStr: "6月"
        },
        {
          monthStr: "7月"
        }, {
          monthStr: "8月"
        }, {
          monthStr: "9月"
        }, {
          monthStr: "10月"
        }, {
          monthStr: "11月"
        }, {
          monthStr: "12月"
        },
      ],//月
      markerData: [],//maker点
      nowYear: null,
      nowDate: null,
      allyaer: "",
      allquarter: "",
      allmonth: "",
      projectId: "",
      tendersId: "",
      centerMap: [108.948024, 34.263161],
      selectData: {
        UserId: "229e5645-4a62-4fde-9194-1b743cf9aa2c", //用户Id
        SelectiveType: "1", //1：生产方量，2：生产盘数
        BhzNO: "", //拌和站编号
        StartDate: "", //开始时间
        EndDate: "", //结束时间
        OrgType: 3, //1、大屏初始化时，项目下拉框为工程建设项目时该字段为：OrgType=3并且IsOrg=true
        // 2、当项目下拉列表选择具体项目的时候：OrgType=3并且IsOrg=false
        // 3、当标段下拉列表选择具体标段的时候：OrgType=4并且IsOrg=false
        OrgKey: "", //1、大屏初始化时，项目下拉框为工程建设项目时该字段为：OrgType=""
        // 2、当选择具体项目的时候该字段为：OrgType="项目id"
        // 3、当选择具体标段的时候该字段为：OrgType="标段id"
        IsOrg: true //1、true，2、false

      },
      // 地图
      map: null,
      markers: [],
      typeImgA: require("../assets/img/mapOn.png"),
      typeImgN: require("../assets/img/mapUn.png"),
      // 地图切换按钮信息
      typeData: [
        { text: "拌和原材超标在线预警", show: false },
        { text: "不合格未闭环在线告警", show: false },

      ],
      // 地图
      // tabs


      projectData: [
        { text: "生产方量", show: true },
        { text: "生产盘数", show: false },],
      // 拌和站生产质量分析
      quantityData: [
        { text: "生产方量", show: true },
        { text: "生产盘数", show: false },
      ],
      // 拌和站生产产能纺计左
      produceLeftData: [
        { text: "生产方量", show: true },
        { text: "生产盘数", show: false },
      ],
      // 拌和站生产产能纺计左
      // 拌和站生产产能纺计右
      produceRightData: [
        { text: "生产方量", show: true },
        { text: "生产盘数", show: false },
      ],
      // 拌和站生产产能纺计右
      // tabs
      getBhzConcreteIndex: 0,//各工程项目砼生产统计
      getBhzQualityIndex: 0,//拌和站生产质量分析
      getBhzProCatyIndex: 0,//拌和站生产产能纺计左
      getBhzProeFcyIndex: 0//拌和站生产产能纺计右
    }
  },
  components: {
    // 拌和站生产产能纺计右
    ProduceRight,
    // 拌和站生产产能纺计左
    ProduceLeft,
    Project,
    ProjectTable,
    QuantityEcharts,
    Rate
  },
  created() {
    // 获取选择时间年
    this.getAllYear();
  },
  mounted() {
    this.getDate()
    // this.getMap()
    this.getToken()//获取token

    var that = this
    setTimeout(() => {
      that.getProjectList()//获取项目列表
      that.getBhzProCatyList(0)//拌和站生产产能统计左侧
      that.getBhzProeFcyList(0)//拌和站生产产能统计右侧
      that.getBhzConcreteList(0)//各工程项目砼生产统计
      that.getBhzQualityList(0)//拌和站生产质量分析
      that.getBhList()
    }, 500)
    setTimeout(() => {

      that.getMap();
    }, 1000);

    this.monthsData = this.monthData

    // var datas = {
    //   fAreaid: "0"
    // }
    // //  例如登陆调用
    // exit(datas).then(res => {
    //   //数据处理
    //   console.log(res)

    // }).catch()
  },
  methods: {
    // 选择项目
    projectList1(event) {
      this.selectData.BhzNO = ""

      // console.log(event.target.value);
      if (event.target.value == "") {
        this.selectData.OrgKey = "";
        this.projectId = "";
        this.selectData.OrgType = 3;
        this.selectData.IsOrg = true
      } else {


        this.selectData.OrgKey = event.target.value;
        this.projectId = event.target.value;
        this.selectData.OrgType = 3;
        this.selectData.IsOrg = false
      }
      this.gettendersList(event.target.value)
      this.getBhzProCatyList(this.getBhzProCatyIndex)//拌和站生产产能统计左侧
      this.getBhzProeFcyList(this.getBhzProeFcyIndex)//拌和站生产产能统计右侧
      this.getBhzQualityList(this.getBhzQualityIndex)///拌和站生产质量分析
      this.getBhzConcreteList(this.getBhzConcreteIndex)/// 各工程项目砼生产统计
      this.getBhList()//地图


    },
    // 选择标段
    projectList2(event) {

      this.selectData.BhzNO = ""
      // this.mapShow.setZoomAndCenter(10, this.centerMap);
      if (event.target.value == "") {
        this.tendersId = "";
        this.selectData.OrgKey = this.projectId;

        this.selectData.OrgType = 3;
        this.selectData.IsOrg = false;
      } else {


        this.tendersId = event.target.value;
        this.selectData.OrgKey = event.target.value;

        this.selectData.OrgType = 4;
        this.selectData.IsOrg = false;
      }
      this.getBhzProCatyList(this.getBhzProCatyIndex)//拌和站生产产能统计左侧
      this.getBhzProeFcyList(this.getBhzProeFcyIndex)//拌和站生产产能统计右侧
      this.getBhzQualityList(this.getBhzQualityIndex)///拌和站生产质量分析
      this.getBhzConcreteList(this.getBhzConcreteIndex)/// 各工程项目砼生产统计
      this.getBhList()//地图
    },
    // 时间选择
    projectList3(event) {

      var a = event.target.value;

      this.yearText = a.substr(0, a.length - 1)
      if (a == "") {
        this.getDate()
      } else {


        this.yearText = a.substr(0, a.length - 1)
        var time = new Date();
        const y = time.getFullYear();
        const m = (time.getMonth() + 1 + "").padStart(2, "0");
        const d = (time.getDate() + "").padStart(2, "0");
        var timing = `${a.substr(0, a.length - 1)}-${m}-${d}`;
        this.selectData.StartDate = a.substr(0, a.length - 1) + '-01-01' //开始时间
        this.selectData.EndDate = timing //结束时间
        this.allyaer = a

        if (a.substr(0, a.length - 1) == y) {
          if (time.getMonth() + 1 <= 3) {
            this.quarterData = [{
              quarterStr: "第一季度",
              index: 1
            }]
          } else if (time.getMonth() + 1 <= 6) {
            this.quarterData = [{
              quarterStr: "第一季度",
              index: 1
            }, {
              quarterStr: "第二季度",
              index: 2
            }]

          } else if (time.getMonth() + 1 <= 9) {
            this.quarterData = [{
              quarterStr: "第一季度",
              index: 1
            }, {
              quarterStr: "第二季度",
              index: 2
            }, {
              quarterStr: "第三季度",
              index: 3
            }]
          } else if (time.getMonth() + 1 <= 12) {

            this.quarterData = [{
              quarterStr: "第一季度",
              index: 1
            }, {
              quarterStr: "第二季度",
              index: 2
            }, {
              quarterStr: "第三季度",
              index: 3
            }, {
              quarterStr: "第四季度",
              index: 4
            }]
          }
        } else {
          this.quarterData = [{
            quarterStr: "第一季度",
            index: 1
          }, {
            quarterStr: "第二季度",
            index: 2
          }, {
            quarterStr: "第三季度",
            index: 3
          }, {
            quarterStr: "第四季度",
            index: 4
          }]
        }
      }
      // this.allquarter = this.quarterData[0].quarterStr


      this.getBhzProCatyList(this.getBhzProCatyIndex)//拌和站生产产能统计左侧
      this.getBhzProeFcyList(this.getBhzProeFcyIndex)//拌和站生产产能统计右侧
      this.getBhzQualityList(this.getBhzQualityIndex)///拌和站生产质量分析
      this.getBhzConcreteList(this.getBhzConcreteIndex)/// 各工程项目砼生产统计
      // this.getBhList()//地图
    },
    projectList4(event) {
      this.tendersText = event.target.value
      if (event.target.selectedIndex == 0) {
        this.monthsData = this.monthData
        if (this.nowYear == this.yearText) {
          this.getDate()
        } else {
          this.selectData.StartDate = this.yearText + '-01-01' //开始时间
          this.selectData.EndDate = this.yearText + '-12-31'  //结束时间
        }
      } else {


        // if (this.monthText == null) {
        if (event.target.selectedIndex == 1) {
          this.selectData.StartDate = this.yearText + '-01-01' //开始时间
          this.selectData.EndDate = this.yearText + '-03-31'  //结束时间
        } else if (event.target.selectedIndex == 2) {
          this.selectData.StartDate = this.yearText + '-04-01' //开始时间
          this.selectData.EndDate = this.yearText + '-06-30'  //结束时间
        } else if (event.target.selectedIndex == 3) {
          this.selectData.StartDate = this.yearText + '-07-01' //开始时间
          this.selectData.EndDate = this.yearText + '-09-30'  //结束时间
        } else if (event.target.selectedIndex == 4) {
          this.selectData.StartDate = this.yearText + '-10-01' //开始时间
          this.selectData.EndDate = this.yearText + '-12-31'  //结束时间
        }
        // } else {
        //   var o = this.getDaysInOneMonth(this.yearText, this.monthText);
        //   this.selectData.StartDate = this.yearText + '-' + this.monthText + '-01' //开始时间
        //   this.selectData.EndDate = this.yearText + '-' + this.monthText +'-' +o //结束时
        // }
        // if (event.target.selectedIndex == 0) {
        //   this.monthsData = this.monthData
        // } else {


        this.monthsData = this.monthData.slice((event.target.selectedIndex - 1) * 3, event.target.selectedIndex * 3)
        // }
        var a = event.target.value;
        this.allquarter = a
      }

      this.getBhzProCatyList(this.getBhzProCatyIndex)//拌和站生产产能统计左侧
      this.getBhzProeFcyList(this.getBhzProeFcyIndex)//拌和站生产产能统计右侧
      this.getBhzQualityList(this.getBhzQualityIndex)///拌和站生产质量分析
      this.getBhzConcreteList(this.getBhzConcreteIndex)/// 各工程项目砼生产统计
      // this.getBhList()//地图
    },
    projectList5(event) {

      var a = event.target.value;
      if (event.target.value == "") {
        // nowDate
        if (this.nowYear == this.yearText && this.tendersText == 0) {
          this.selectData.StartDate = this.yearText + '-01-01' //开始时间
          this.selectData.EndDate = this.nowDate  //结束时间
        } else {
          if (this.tendersText == 1) {
            this.selectData.StartDate = this.yearText + '-01-01' //开始时间
            this.selectData.EndDate = this.yearText + '-03-31'  //结束时间  //结束时间
          } else if (this.tendersText == 2) {
            this.selectData.StartDate = this.yearText + '-04-01' //开始时间
            this.selectData.EndDate = this.yearText + '-06-30'  //结束时间
          } else if (this.tendersText == 3) {
            this.selectData.StartDate = this.yearText + '-07-01' //开始时间
            this.selectData.EndDate = this.yearText + '-09-30'  //结束时间
          } else if (this.tendersText == 4) {
            this.selectData.StartDate = this.yearText + '-10-01' //开始时间
            this.selectData.EndDate = this.yearText + '-12-31'  //结束时间
          }
        }
      } else {



        this.monthText = a.substr(0, a.length - 1)
        // console.log(a.substr(0, a.length - 1));
        // quarterText
        // var day=  this.getDaysInMonth(this.yearText,a.substr(0, a.length - 1)-0)
        // console.log(day);
        var o = this.getDaysInOneMonth(this.yearText, a.substr(0, a.length - 1));
        this.selectData.StartDate = this.yearText + '-' + a.substr(0, a.length - 1) + '-01' //开始时间
        this.selectData.EndDate = this.yearText + '-' + a.substr(0, a.length - 1) + '-' + o //结束时间
        this.selectData.allmonth = a
      }

      // console.log(this.selectData);
      this.getBhzProCatyList(this.getBhzProCatyIndex)//拌和站生产产能统计左侧
      this.getBhzProeFcyList(this.getBhzProeFcyIndex)//拌和站生产产能统计右侧
      this.getBhzQualityList(this.getBhzQualityIndex)///拌和站生产质量分析
      this.getBhzConcreteList(this.getBhzConcreteIndex)/// 各工程项目砼生产统计
      // this.getBhList()//地图
    },
    getDaysInOneMonth(year, month) {
      month = parseInt(month, 10);
      var d = new Date(year, month, 0);  //这个是都可以兼容的
      var date = new Date(year + "/" + month + "/0")   //IE浏览器可以获取天数，谷歌浏览器会返回NaN
      return d.getDate();
    },
    getDate() {
      var time = new Date();
      const y = time.getFullYear();
      this.nowYear = y
      const m = (time.getMonth() + 1 + "").padStart(2, "0");
      const d = (time.getDate() + "").padStart(2, "0");
      const hh = (time.getHours() + "").padStart(2, "0");
      const mm = (time.getMinutes() + "").padStart(2, "0");
      const ss = (time.getSeconds() + "").padStart(2, "0");
      var timing = `${y}-${m}-${d}`;
      this.selectData.StartDate = y + '-01-01' //开始时间
      this.selectData.EndDate = timing //结束时间
      this.nowDate = timing
      this.yearText = y
      // console.log(time.getMonth() + 1);
      if (time.getMonth() + 1 <= 3) {
        this.quarterData = [{
          quarterStr: "第一季度",
          index: 1
        }]
      } else if (time.getMonth() + 1 <= 6) {
        this.quarterData = [{
          quarterStr: "第一季度",
          index: 1
        }, {
          quarterStr: "第二季度",
          index: 2
        }]
      } else if (time.getMonth() + 1 <= 9) {
        this.quarterData = [{
          quarterStr: "第一季度",
          index: 1
        }, {
          quarterStr: "第二季度",
          index: 2
        }, {
          quarterStr: "第三季度",
          index: 3
        }]
      } else if (time.getMonth() + 1 <= 12) {
        this.quarterData = [{
          quarterStr: "第一季度",
          index: 1
        }, {
          quarterStr: "第二季度",
          index: 2
        }, {
          quarterStr: "第三季度",
          index: 3
        }, {
          quarterStr: "第四季度",
          index: 4
        }]
      }



      // quarterData: [
      //   {
      //     quarterStr: "第一季度",
      //     index: 1
      //   }, {
      //     quarterStr: "第二季度",
      //     index: 2
      //   }, {
      //     quarterStr: "第三季度",
      //     index: 3
      //   }, {
      //     quarterStr: "第四季度",
      //     index: 4
      //   },
      // ],
    },
    // 选择年份
    getAllYear() {
      var date = new Date();
      var year = date.getFullYear() + 1;


      this.allyaer = year - 1 + "年";
      // console.log(this.selectData.allyaer);
      var c = year - 3;
      var allyear = [];

      for (var i = year; i >= c; i--) {
        // allyear.push({ yearStr: i - 1 + "年" + "——" + i + "年" });
        allyear.push({ yearStr: i - 1 + "年" });

      }
      this.allyaerinfo = allyear;
    },
    // getToken
    getToken() {
      getToken({ UserId: "229e5645-4a62-4fde-9194-1b743cf9aa2c" }).then(res => {
        if (res.StatusCode == 200) {

          if (res.Data.Result == 100) {
            this.token = res.Data.Data.Token
            localStorage.setItem('token', res.Data.Data.Token)
            // console.log(this.token);
          }
        } else {
          console.log('获取token失败');
        }
      }).catch(() => {
        return false;
      });
      // const { data: res } = await this.$http.post(
      //   "msypt/user/usertoken",

      //   { UserId: "229e5645-4a62-4fde-9194-1b743cf9aa2c" }
      // );

    },
    // 地图拌和站信息
    getBhList() {
      var time = new Date();
      time.setMonth(time.getMonth() - 1)

      var yy = time.getFullYear();
      var mm = time.getMonth() + 1;
      var dd = time.getDate();
      var formatwdate = `${yy}-${mm}-${dd}`;


      var datas = {
        UserId: "229e5645-4a62-4fde-9194-1b743cf9aa2c",
        OrgType: this.selectData.OrgType, //1、大屏初始化时，项目下拉框为工程建设项目时该字段为：OrgType=3并且IsOrg=true
        OrgKey: this.selectData.OrgKey, //1、大屏初始化时，项目下拉框为工程建设项目时该字段为：OrgType=""
        IsOrg: this.selectData.IsOrg,//1、true，2、false
        StartDate: formatwdate, //开始时间
        EndDate: this.selectData.EndDate, //结束时间
      }
      getBhList(datas).then(res => {
        if (res.StatusCode == 200) {
          if (res.Data.Result == 100) {
            // console.log(res);
            this.markerData = res.Data.Data
            if (this.selectData.OrgKey == '' || this.selectData.OrgKey == "") {
              this.getMaker(this.indexNum)
              this.mapShow.setZoomAndCenter(6, this.centerMap);

            } else {

              // console.log(88888,this.markers);
              this.mapShow.remove(this.markers)

              this.getMaker(this.indexNum)
              this.mapShow.setZoomAndCenter(10, this.markerData[0].Lngat);
            }
            // this.getMap()
            // this.getMap()
            // this.projectsData = res.Data.Data

          }
        } else {
          console.log('获取项目列表失败');
        }
      }).catch(() => {
        return false;
      });
    },
    // getProjectList 获取项目列表
    getProjectList() {
      getProjectList({ UserId: "229e5645-4a62-4fde-9194-1b743cf9aa2c" }).then(res => {
        if (res.StatusCode == 200) {
          if (res.Data.Result == 100) {
            // console.log(res.Data.Data);
            this.projectsData = res.Data.Data

          }
        } else {
          console.log('获取项目列表失败');
        }
      }).catch(() => {
        return false;
      });
    },
    // 标段信息
    gettendersList(id) {
      gettendersList({ UserId: "229e5645-4a62-4fde-9194-1b743cf9aa2c", ProjectId: id }).then(res => {
        if (res.StatusCode == 200) {
          if (res.Data.Result == 100) {
            // console.log(res.Data.Data);
            this.tendersData = res.Data.Data
          }
        } else {
          console.log('获取项目列表失败');
        }
      }).catch(() => {
        return false;
      });
    },
    // 拌和站生产产能统计
    getBhzProCatyList(index) {
      this.selectData.SelectiveType = index + 1
      getBhzProCatyList(this.selectData).then(res => {
        if (res.StatusCode == 200) {
          if (res.Data.Result == 100) {
            this.BhzProCatyData = res.Data.Data
          }
        } else {
          console.log('获取拌和站生产产能统计表格失败');
        }
      }).catch(() => {
        return false;
      });
    },
    // 拌和站生产产能统计
    getBhzProeFcyList(index) {
      this.selectData.SelectiveType = index + 1
      getBhzProeFcyList(this.selectData).then(res => {
        // console.log(res);
        if (res.StatusCode == 200) {
          if (res.Data.Result == 100) {
            this.BhzProeFcyData = res.Data.Data
            // console.log(this.BhzProeFcyData);
            // this.tendersData=res.Data.Data
          }
        } else {
          console.log('获取拌和站生产产能统计图表失败');
        }
      }).catch(() => {
        return false;
      });
    },
    // 各工程项目砼生产统计
    getBhzConcreteList(index) {
      this.selectData.SelectiveType = index + 1
      getBhzConcreteList(this.selectData).then(res => {
        if (res.StatusCode == 200) {
          if (res.Data.Result == 100) {
            this.BhzConcreteData = res.Data.Data
          }
        } else {
          console.log('获取拌和站生产产能统计失败');
        }
      }).catch(() => {
        return false;
      });
    },
    // 拌和站生产质量分析
    getBhzQualityList(index) {
      this.selectData.SelectiveType = index + 1
      getBhzQualityList(this.selectData).then(res => {
        if (res.StatusCode == 200) {
          if (res.Data.Result == 100) {
            this.BhzQualityData = res.Data.Data
            // console.log(this.BhzQualityData);
          }
        } else {
          console.log('获取拌和站生产质量分析失败');
        }
      }).catch(() => {
        return false;
      });
    },
    // 拌和站生产质量分析
    // tabs
    // 各工程项目砼生产统计projectIndexMoudle
    changeProjectTbs(e, index) {
      this.getBhzConcreteIndex = index//各工程项目砼生产统计

      this.getBhzConcreteList(index)
      for (let i in this.projectData) {
        if (parseFloat(i) === index) {
          this.projectData[i].show = true;

        } else {
          this.projectData[i].show = false;
        }
      }
    },
    // 各工程项目砼生产统计
    // 拌和站生产质量分析
    changeQuantityTbs(e, index) {
      if (index == 0) {
        this.getBhzQualityText = "方"
      } else if (index == 1) {
        this.getBhzQualityText = "盘"
      }
      this.getBhzQualityList(index)
      this.getBhzQualityIndex = index//拌和站生产质量分析
      for (let i in this.quantityData) {
        if (parseFloat(i) === index) {
          this.quantityData[i].show = true;

        } else {
          this.quantityData[i].show = false;
        }
      }
    },
    // 拌和站生产质量分析
    // 拌和站生产产能纺计左
    changeproduceLeftTbs(e, index) {
      this.getBhzProCatyIndex = index
      this.getBhzProCatyList(index)

      for (let i in this.produceLeftData) {
        if (parseFloat(i) === index) {
          this.produceLeftData[i].show = true;

        } else {
          this.produceLeftData[i].show = false;
        }
      }
    },
    // 拌和站生产产能纺计左
    // 拌和站生产产能纺计右
    changeproduceRightTbs(e, index) {
      this.getBhzProeFcyIndex = index//拌和站生产产能纺计右
      this.getBhzProeFcyList(index)
      if (index == 0) {
        this.BhzProeFcyText = "出料方数"
      } else if (index == 1) {
        this.BhzProeFcyText = "出料盘数"
      }
      for (let i in this.produceRightData) {
        if (parseFloat(i) === index) {
          this.produceRightData[i].show = true;

        } else {
          this.produceRightData[i].show = false;
        }
      }
    },
    // 拌和站生产产能纺计右
    // 地图
    // 地图切换按钮
    changeType(e, index) {

      this.indexNum = index;
      var that = this
      let checked = "";

      for (let i in this.typeData) {
        if (parseFloat(i) === index) {
          this.typeData[i].show = !this.typeData[i].show;
          // console.log(this.typeData[i].show);
          if (this.typeData[i].show == false) {
            this.indexNum = 2
          }
          // checked = this.typeData[i].text;
        } else {
          this.typeData[i].show = false;
        }
      }

      // setTimeout(() => {
      that.mapShow.remove(that.markers)
      that.getMaker(that.indexNum)
      // }, 100)



    },
    // 地图切换按钮
    getMap(index) {
      // console.log(this.point2);
      var that = this;
      var map = new AMap.Map(this.$refs.map, {
        center: this.centerMap, //中心点坐标
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 6, // 放大系数
        viewMode: "3D", //使用3D视图
        mapStyle: "amap://styles/7e3a317269965f4c86dee197526ab466", // 地图样式
        // pitch: 45, // 倾斜程度
      });

      this.mapShow = map;


      // setTimeout(() => {
      //   that.getMaker(that.indexNum);
      // }, 300)
    },
    getMaker(inc) {

      // console.log(this.markerData);
      // this.markerData = [{
      //   BhzNO: "YWGS-BHJ-TJ6-0201",
      //   BhzType: 1,
      //   ContractName: "TJ6",
      //   Lngat: ["106.412764", "30.009494"],
      //   Name: "2#拌合站"
      // }, {
      //   BhzNO: "YWGS-BHJ-TJ5-0101",
      //   BhzType: 2,
      //   ContractName: "TJ5",
      //   Lngat: ["106.414121", "29.92314"],
      //   Name: "1#拌合站"
      // }, {
      //   BhzNO: "JNHHQ-BHJ-TJ1-0101",
      //   BhzType: 3,
      //   ContractName: "TJ1",
      //   Lngat: ["117.066274", "36.756241"],
      //   Name: "2#拌合站"
      // },]
      // console.log(this.markerData);
      var infoWindow;
      var that = this;

      var ccc;

      let markers = [];
      this.markers = markers;

      var warn = []//预警
      var give = []//告警
      var normal = []//正常
      this.markerData.map(item => {

        if (item.BhzType == 1) {
          normal.push(item)
        } else if (item.BhzType == 2) {
          warn.push(item)
        } else if (item.BhzType == 3) {
          give.push(item)
        }
      })


      if (inc == 0) {//预警

        var infoWindow;
        var point = warn;//预警
        point.map((data) => {

          var img = "../../static/img/warn.png";
          var size =
            data.type == 1
              ? new AMap.Size(44, 72)
              : data.type == 2
                ? new AMap.Size(44, 72)
                : new AMap.Size(44, 72);
          let marker = new AMap.Marker({
            position: new AMap.LngLat(data.Lngat[0], data.Lngat[1]),
            icon: new AMap.Icon({
              image: img,
              size: size, //图标大小
              imageSize: size,
            }),

            title: data.ContractName + '/' + data.Name,
          });

          var that = this;

          that.m = marker;
          markers.push(marker);
          var that = this;
          AMap.event.addListener(marker, "click", function (e) {
            that.selectData.BhzNO = data.BhzNO
            // that.getBhzProCatyList(0)//拌和站生产产能统计左侧
            // that.getBhzProeFcyList(0)//拌和站生产产能统计右侧
            // that.getBhzQualityList(0)///拌和站生产质量分析


            that.getBhzProCatyList(that.getBhzProCatyIndex)//拌和站生产产能统计左侧
            that.getBhzProeFcyList(that.getBhzProeFcyIndex)//拌和站生产产能统计右侧
            that.getBhzQualityList(that.getBhzQualityIndex)///拌和站生产质量分析
            // that.getBhzConcreteList(that.getBhzConcreteIndex)/// 各工程项目砼生产统计

          });

        });
      } else if (inc == 1) {//告警
        // console.log('b', give);

        var infoWindow;
        var point = give;//告警
        point.map((data) => {

          var img = "../../static/img/give.png";
          var size =
            data.type == 1
              ? new AMap.Size(44, 72)
              : data.type == 2
                ? new AMap.Size(44, 72)
                : new AMap.Size(44, 72);
          let marker = new AMap.Marker({
            position: new AMap.LngLat(data.Lngat[0], data.Lngat[1]),
            icon: new AMap.Icon({
              image: img,
              size: size, //图标大小
              imageSize: size,
            }),
            // exData: {
            //   id: index,
            // },
            title: data.ContractName + '/' + data.Name,
          });

          var that = this;

          that.m = marker;
          markers.push(marker);
          var that = this;
          AMap.event.addListener(marker, "click", function (e) {
            that.selectData.BhzNO = data.BhzNO
            that.getBhzProCatyList(that.getBhzProCatyIndex)//拌和站生产产能统计左侧
            that.getBhzProeFcyList(that.getBhzProeFcyIndex)//拌和站生产产能统计右侧
            that.getBhzQualityList(that.getBhzQualityIndex)///拌和站生产质量分析

          });

        });
      }
      else if (inc == 2) {
        // console.log('c', this.markerData);

        var inc;
        var point = this.markerData;
        var info;
        var aa;

        point.map((data, index) => {
          // console.log(data.BhzType);
          var img =
            data.BhzType == 1
              ? "../../static/img/normal.png"
              : data.BhzType == 2
                ? "../../static/img/warn.png" : "../../static/img/give.png";

          let marker = new AMap.Marker({
            position: new AMap.LngLat(data.Lngat[0], data.Lngat[1]),
            icon: new AMap.Icon({
              image: img,
              size: new AMap.Size(44, 72), //图标大小
              imageSize: new AMap.Size(44, 72),
            }),
            exData: {
              id: index,
            },
            title: data.ContractName + '/' + data.Name,
            // title: data.F_ProjectName,
          });
          markers.push(marker);



          var that = this;
          AMap.event.addListener(marker, "click", function (e) {
            that.selectData.BhzNO = data.BhzNO
            that.getBhzProCatyList(that.getBhzProCatyIndex)//拌和站生产产能统计左侧
            that.getBhzProeFcyList(that.getBhzProeFcyIndex)//拌和站生产产能统计右侧
            that.getBhzQualityList(that.getBhzQualityIndex)///拌和站生产质量分析
          });
        });
      }

      const overlayGroups = new AMap.OverlayGroup(markers);

      this.mapShow.add(overlayGroups);
    },
    // 地图
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.index {
  height: 100%;

  width: 100%;

  .top {
    height: 66.939%;
    display: flex;
    justify-content: space-between;


    .left {

      height: 100%;
      position: relative;

      .search {
        width: 58.4%;

        position: absolute;
        z-index: 33;
        // top: 3%;
        top: 0.44rem;
        height: 32px;
        transform: translateX(-50%);
        left: 50%;
        box-sizing: border-box;
        display: flex;
        font-size: 0.17rem;
        justify-content: space-between;

        .left {
          display: flex;

          .companySele {
            width: 1.6rem;
            padding-right: 0.08rem;

            select {
              outline: none;
              text-transform: none;
              background-color: rgba(0, 24, 73, 0.8);
              border: 1px solid #0075FF;
              color: #E6FEFF;
              padding: 5px 2px;
              border-radius: 5px;
            }

            #project {
              width: 100%;
            }
          }
        }

        .right {
          display: flex;
          flex-direction: row;

          .timeSele {
            // flex: 1;
            width: 1rem;
            // background: red;
            margin-right: 0.07rem;
            // padding: 0 0.1rem;

            select {
              outline: none;
              text-transform: none;
              background-color: rgba(0, 24, 73, 0.8);
              border: 1px solid #0075FF;
              color: #E6FEFF;
              padding: 5px 2px;
              margin-right: 15px;
              border-radius: 5px;

              margin-bottom: 10px;

              #option {
                background-color: transparent !important;
              }
            }
          }
        }

        // .projectSele {
        //   width: 1.6rem;
        //   padding-left: 0.08rem;

        //   select {
        //     text-transform: none;
        //     background-color: rgba(0, 24, 73, 0.8);
        //     border: 1px solid #0075FF;
        //     color: #E6FEFF;
        //     padding: 5px 2px;
        //     margin-right: 15px;
        //     border-radius: 5px;
        //   }

        //   #project {
        //     width: 100%;
        //   }
        // }



        #SY {
          width: 100%;
        }
      }

      .changeBtn {
        position: absolute;
        transform: translate(-50%, -50%);
        bottom: 4%;
        left: 50%;
        width: 4.17rem;
        // width: 85%;
        height: 0.5rem;
        display: flex;
        justify-content: space-between;
        // border: 1px solid red;
        z-index: 55;





        .mapSelect {
          width: 2rem;
          position: relative;

          .imgSrc {
            width: 100%;
            height: 100%;
          }

          .imgText {
            width: 100%;
            // width: 84%;
            height: 100%;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            color: rgba(0, 117, 255, 1);
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.14rem !important;
            font-weight: 400;
          }
        }

      }
    }

    #myMaps {
      width: 100%;
      height: 100%;

    }

    .right {
      // background: pink;
      // height: 98%;
      height: 98.5%;
      margin-bottom: 0.08rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-content: space-between;

      .project {
        height: 41.2%;
        background: #010148;
        margin-top: 0.08rem;

        .commonHead {
          background: url("../assets/img/head1.png") no-repeat;
          background-size: 100% 100%;

        }

        .projectContent {
          // flex: 1;
          // height: 50%;
          padding-top: 0.11rem;
          // height: calc(100% - 53px);
          height: calc(100% - 0.53rem);

          overflow: hidden;



        }
      }

      .banhuozhan {
        height: 57.2%;
        background: #010148;
        display: flex;
        flex-direction: column;
        display: flex;
        flex-direction: column;

        .commonHead {
          background: url("../assets/img/head1.png") no-repeat;
          background-size: 100% 100%;
        }

        .result {
          // height: calc(100% - 40px);
          height: calc(100% - 0.4rem);

          padding-top: 0.11rem;
          overflow: hidden;
          display: flex;
          //  height: 100%;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          // padding: 0.1rem 0.39rem 0 0.4rem;
          padding: 0.1rem 0.15rem 0 0.15rem;

          overflow: hidden;

          .top {
            height: 45% !important;
            overflow: hidden;
            padding-left: 0.1rem;
            //  background: cadetblue;
            position: relative;
            display: flex;

            .left {
              width: 70%;

              .dischargeLeft {
                position: absolute;
                left: 1%;
                top: 7%;
                width: 37%;
                height: 77%;

                border-right: 1px solid;
                border-image: -webkit-linear-gradient(rgba(0, 204, 158, 0.4),
                    rgba(0, 204, 158, 0.4),
                    transparent,
                    transparent) 1 10 1;
                /* 控制边框颜色渐变 */
                border-image: -moz-linear-gradient(rgba(0, 204, 158, 0.4),
                    rgba(0, 204, 158, 0.4),
                    transparent,
                    transparent) 1 10 1;
                border-image: linear-gradient(rgba(0, 204, 158, 0.4),
                    rgba(0, 204, 158, 0.4),
                    transparent,
                    transparent) 1 10 1;

                /* 标准的必须写在最后 */
                .box {}
              }

              .dischargeRight {
                position: absolute;
                right: 1%;
                top: 7%;
                width: 37%;
                height: 77%;

                border-left: 1px solid;

                border-image: -webkit-linear-gradient(rgba(215, 157, 77, 0.4),
                    rgba(215, 157, 77, 0.4),
                    transparent,
                    transparent,
                    transparent) 1 10 1;
                /* 控制边框颜色渐变 */
                border-image: -moz-linear-gradient(rgba(215, 157, 77, 0.4),
                    rgba(215, 157, 77, 0.4),
                    transparent,
                    transparent,
                    transparent) 1 10 1;
                border-image: linear-gradient(rgba(215, 157, 77, 0.4),
                    rgba(215, 157, 77, 0.4),
                    transparent,
                    transparent,
                    transparent) 1 10 1;
                /* 标准的必须写在最后 */
              }

            }

            .right {
              width: 30%;
            }

          }


          .bottom {
            height: 55% !important;
            overflow: hidden;
            width: 100%;
            // background: chartreuse;
          }

          // .echarts {

          //   width: 30%;
          //   width: 38%;
          //   display: flex;
          //   flex-direction: column;

          //   align-items: center;

          //   .title {
          //     height: 30px;
          //     box-sizing: border-box;
          //     border: 1px solid rgba(255, 166, 202, 1);
          //     width: 1.5rem;
          //     margin: 0.05rem 0;
          //     padding: 0 0.08rem;
          //     display: flex;
          //     color: rgba(255, 166, 202, 0.8);
          //     font-size: 0.13rem;
          //     line-height: 30px;
          //     justify-content: space-between;
          //     background: rgba(255, 166, 202, 0.1500);
          //   }


          // }

          // .table {
          //   width: 70%;
          //   width: 62%;

          // }
        }
      }

    }
  }

  .bottom {
    height: 33.061%;

    display: flex;

    .left {
      // width: 50%;

      height: 100%;
      background: #010148;
      display: flex;
      flex-direction: column;

      .commonHead {
        background: url("../assets/img/head1.png") no-repeat;
        background-size: 100% 100%;
      }

      .echarts {
        // flex: 1;
        padding-top: 0.15rem;
        // height: calc(100% - 56px);
        height: calc(100% - 0.56rem);

        display: flex;
        align-items: center;
        justify-content: center;
        // border: 1px solid red;
      }
    }

    .right {
      // width: 50%;
      height: 100%;

      background: #010148;
      display: flex;
      flex-direction: column;

      .commonHead {
        background: url("../assets/img/head1.png") no-repeat;
        background-size: 100% 100%;
      }

      .echarts {
        flex: 1;
      }
    }
  }

}

.commonHead {
  position: relative;
  height: 34px;
  line-height: 34px;
  // width: 100%;

  background: url("../assets/img/head1.png") no-repeat;
  background-size: 100% 100%;
  color: rgba(230, 254, 255, 1);
  text-align: center;
  font-size: 0.18rem;

}

.tab {
  position: absolute;
  top: 0;
  right: 0.2rem;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.13rem;

  .changeBtn {

    width: 1.6rem;
    height: 0.22rem;
    display: flex;
    border-radius: 0.02rem;

    overflow: hidden;


    .mapSelect {
      width: 100%;
      display: flex;


      border-left: 1px solid transparent !important;
      border-right: 1px solid transparent !important;




      .imgText {
        flex: 1;

        text-align: center;
        font-size: 0.13rem;
        line-height: 0.22rem;
        font-weight: 400;




      }
    }

  }

}

.echarts {
  width: 100%;
}

.dischargeLeft::after {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  top: 0%;
  width: 100%;
  height: 100%;

  border-left: 1px solid rgba(0, 204, 158, 0.4);
  border-top: 1px solid rgba(0, 204, 158, 0.4);
  // border-bottom: 1px solid rgba(0, 204, 158, 0.4);
}

.dischargeLeft::before {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  bottom: 0%;
  width: 80%;
  height: 100%;

  border-bottom: 1px solid rgba(0, 204, 158, 0.4);
}

.dischargeRight::after {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  top: 0%;
  width: 100%;
  height: 100%;

  border-right: 1px solid rgba(215, 157, 77, 0.4);
  border-top: 1px solid rgba(215, 157, 77, 0.4);
  // border-bottom: 1px solid rgba(215, 157, 77, 0.4);
}

.dischargeRight::before {
  position: absolute;
  display: block;
  content: "";
  right: 0;
  bottom: 0%;
  width: 80%;
  height: 100%;

  border-bottom: 1px solid rgba(215, 157, 77, 0.4);
}
</style>
